import React, { useEffect, useState, Fragment } from 'react'

import { Button, Input, Popconfirm, Modal } from 'antd';
import { EditOutlined, CodepenOutlined, FontSizeOutlined, FontColorsOutlined, EnvironmentOutlined, UserOutlined } from '@ant-design/icons';

import styles from './index.module.css'



//网点信息编辑按钮
function OperationBtn(props) {
    //父控件传过来的值
    const { itemInfo } = props;
    //信息弹出框
    const [isModalOpen, setIsModalOpen] = useState(false);

    const [branchName, setbBranchName] = useState(() => {
        return itemInfo.branchName;
    })
    const [bankName, setbBnkName] = useState(() => {
        return itemInfo.bankName;
    })
    const [branchAddress, setBranchAddress] = useState(() => {
        return itemInfo.branchAddress;
    })
    const [belongDistricts, seBelongDistricts] = useState(() => {
        return itemInfo.belongDistricts;
    })

    //[]空数组相当于componentDidMount
    useEffect(() => {
        return () => {
            initData()

        }
    }, []);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    }

    const handleOk = () => {
        setIsModalOpen(false);
    };

    //初始化信息
    function initData() {

    }

    //确认删除网点
    const confirm = e => {
        console.log(e);
    };

    //取消删除网点
    const cancel = e => {

    };

    function onChangeBranchName(val) {
        let value = val.target.value
        setbBranchName(value)
    }
    function onChangeBankName(val) {
        let value = val.target.value
        setbBnkName(value)
    }
    function onChangeBranchAddress(val) {
        let value = val.target.value
        setBranchAddress(value)
    }
    function onChangeBelongDistricts(val) {
        let value = val.target.value
        seBelongDistricts(value)
    }

    return (
        <Fragment>
            <Modal
                title={'编辑网点信息'}
                closable={{ 'aria-label': 'Custom Close Button' }}
                width={450}
                okText={'确认修改'}
                cancelText={'取消'}
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                footer={(_, { OkBtn, CancelBtn }) => (
                    <>
                        <Popconfirm
                            title="是否确认删除该网点?"
                            description="删除网点时，其所属人员信息将同步删除。"
                            onConfirm={confirm}
                            onCancel={cancel}
                            okText="是"
                            cancelText="否"
                        >
                            <Button type="primary" danger>删除网点</Button>
                        </Popconfirm>
                        <CancelBtn />
                        <OkBtn />
                    </>
                )}
            >
                <div className={styles.root}>
                    <Input onChange={onChangeBranchName} value={branchName} placeholder="网点名称..." prefix={<FontSizeOutlined />} allowClear />
                    <Input onChange={onChangeBankName} value={bankName} className={styles.inpot_item} placeholder="银行名称..." prefix={<FontColorsOutlined />} allowClear />
                    <Input onChange={onChangeBranchAddress} value={branchAddress} className={styles.inpot_item} placeholder="网点地址..." prefix={<EnvironmentOutlined />} allowClear />
                    <Input onChange={onChangeBelongDistricts} value={belongDistricts} className={styles.inpot_item} placeholder="所属区县...." prefix={<CodepenOutlined />} allowClear />
                </div>
            </Modal>
            <div className={styles.editor_root}>
                <Button size='small' onClick={showModal} icon={<EditOutlined />}>编辑网点信息</Button>
                <Button className={styles.btn_padding} size='small' color="primary" variant="outlined" onClick={showModal} icon={<UserOutlined />}>查看网点人员</Button>
            </div>
        </Fragment >
    )
}


export default OperationBtn

